﻿@inherits LayoutComponentBase

<Layout>
    <Sider>
        <div id="logo">
            @*My Documents*@
            @{
                var currentPath = string.IsNullOrEmpty(Path) ? "/" : Path.Replace('\\', '/');
                currentPath = string.IsNullOrWhiteSpace(FilePath) ? currentPath
                : FilePath.Replace('\\', '/');
            }
            <p style="font-size:12px; font-weight:400; color:gray"><i>@currentPath</i></p>
        </div>
        <NavMenu OnClickFileChanged="item => OnClickFile(item)" />
    </Sider>
    <Layout Class="site-layout">
        <Content Class="site-layout-background" Style="margin: 24px 16px;padding: 24px;min-height: 280px;overflow-y: auto;">
            <CascadingValue TValue="string" IsFixed="false" Value="@FilePath" Name="FilePath">
                <CascadingValue TValue="string" IsFixed="false" Value="@Path" Name="Path">
                    <CascadingValue TValue="string" IsFixed="false" Value="@PWD" Name="PWD">
                    @Body
                    </CascadingValue>
                </CascadingValue>
            </CascadingValue>
        </Content>
    </Layout>
</Layout>

@code
{
    public string Path { get; set; } = "/";
    public string FilePath { get; set; } = "";
    public string PWD { get; set; } = "";

    private void OnClickFile(FileSave file)
    {
        if (file.Type == FileSaveEnum.CreateFolder)
        {
            this.PWD = "";
            this.FilePath = "";
            this.Path = file.Value;
            return;
        }

        this.FilePath = file.Value;
        this.PWD = file.PWD;

        var isLinux = file.Value.IndexOf('/') > -1;
        var tag = isLinux ? '/' : '\\';
        var arr = file.Value.Split(tag);
        var list = arr.Take(arr.Count() - 1);
        this.Path = string.Join(tag, list);
    }
}

<style>

    #app, .ant-layout{
        height:100%;
    }

    #logo{
        margin: 16px;
        color: white;
        font-weight: 600;
        font-size: 16px;
    }

    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }

        #components-layout-demo-custom-trigger .trigger:hover {
            color: #1890ff;
        }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px;
    }

    .site-layout .site-layout-background {
        background: #fff;
    }

</style>
